<template>
	<view class="fittings-card">
		<view class="defaultMap" v-if="!carList.length">
			<image src="/static/img/images/tu.png" mode=""></image>
			<view class="texna">
				暂无更多信息，看看其他的吧
			</view>
		</view>
    <view class="content" v-for="(item, ind) in carList" :key="ind">
      <view class="detail-content">
        <view class="icon">
          <i-icon icon="iconfenxiangpengyouquan"></i-icon>
        </view>
        <view class="detai-main">
          <!-- <view class="flex" v-for="(it,itn) in item.list" :key='itn'>
            <view class="left" >
                <icon-svg  v-if="itn==0" icon-class="iconcheliangjiaoyi"></icon-svg> <text  >{{it.label}}:</text> 
            </view>
            <view class="right">
              {{it.value}}
            </view>
          </view> -->
          <view class="flex">
            <view class="left">
              <i-icon icon="iconcheliangjiaoyi"></i-icon>
              <text>车型:</text>
            </view>
            <view class="right">{{ item.carName }}</view>
          </view>
          <view class="flex">
            <view class="left"><text>VIN:</text></view>
            <view class="right">{{ item.vin }}</view>
          </view>
          <view class="flex">
            <view class="left"><text>需求配件:</text></view>
            <view class="right bgFFF6CE">{{ item.findGoodDetail }}</view>
          </view>
          <view class="flex">
            <view class="left"><text>地区:</text></view>
            <view class="right">{{ item.region }}</view>
          </view>
          <view class="dateFlex">
            <view class="flex">
              <view class="left"><text>发布日期:</text></view>
              <view class="right">{{ item.addtime }}</view>
            </view>
            <view class="flex">
              <view class="left"><text>有效期至:</text></view>
              <view class="right">{{ item.endtime }}</view>
            </view>
          </view>

          <view class="flex">
            <view class="left"><text>询方价:</text></view>
            <view class="right">{{ item.findStoreName }}</view>
          </view>
          <view class="flex">
            <view class="left"><text>联系人:</text></view>
            <view class="right">{{ item.findContactName }}</view>
          </view>
        </view>
      </view>
      <view class="browse-content">
        <view class="left">
          <text>{{item.visitCount}}</text>次浏览/ <text>{{item.askCount}}</text> 人参与报价
        </view>
        <view class="right">
          <view class="btn">
            我要报价
          </view>
          <view class="">
            报价后可联系买方
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
export default {
	props: {
    carList: {
      type: Array,
      default: () => []
    }
  },
	data() {
		return {
			// carList: [
			// 	{
			// 		textIcon: '', //字体图标
			// 		// list:[{label:'车型',value:'北京奔驰G系 2020款 G63 3.0T 双离合 四驱 蓝调版'},
			// 		//       {label:'VIN',value:'LE*******88*******'},
			// 		// 			{label:'需求配件',value:'机油滤清器×1；空气滤清器×1；国行美孚/Mobil 美孚1号全合成机油5w-40 4L装×1…'},
			// 		// 			{label:'地区',value:'四川省 成都市'},
			// 		// 			{label:'发布日期',value:'08/22 16:40'},
			// 		// 			{label:'有效期至',value:'08/22'},
			// 		// 			{label:'询方价',value:'7迈养车万达店'},
			// 		// 			{label:'联系人',value:'马**'},
			// 		// 			],
			// 		carIcon: '', //车标
			// 		type: '北京奔驰G系 2020款 G63 3.0T 双离合 四驱 蓝调版', //车型
			// 		vin: 'LE*******88*******', //vin
			// 		fittings: '机油滤清器×1；空气滤清器×1；国行美孚/Mobil 美孚1号全合成机油5w-40 4L装×1…', //配件
			// 		address: '四川省 成都市', //地区
			// 		date: '08/22 16:40', //Contact
			// 		lastDate: '08/22', //有效期
			// 		inquirePrice: '7迈养车万达店', //询方价
			// 		contact: '马**', //联系人
			// 		browse: '588',
			// 		contant: '10'
			// 	}
			// ]
		}
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
	//默认图
	.defaultMap {
		padding-top: 100rpx;
		width: 100%;
		height: 85vh;
		text-align: center;
	
		image {
			width: 340rpx;
			height: 340rpx;
		}
	
		.texna {
			font-size: 28rpx;
			color: #999999;
		}
	}
.fittings-card {
  background: #F6F6F6;
  margin-bottom: 30rpx;
}

.content{
	width: 100%;
	padding: 2%;
	padding-bottom: 0rpx;
	background: #fff;
	border-radius: 10rpx;
  margin: 22rpx 0;
	.detail-content{
		display: flex;
		border-bottom: 1px solid #F6F6F6;
		padding-bottom: 10rpx;
		margin-bottom: 10rpx;
		.icon{
			width: 48rpx;
			height: 48rpx;
			margin-right: 4rpx ;
			padding-top: 4rpx ;
			flex-direction: column;
		}
		.detai-main{
			flex-direction: column;
			.flex{
				display: flex;
				padding: 6rpx 0px;
				font-size: 26rpx;
				flex-wrap:wrap;
				.left{
					color: #9A9A9A;
					flex-direction: column;
					 width:140rpx;
					 color: #999999;
					 text{
						 margin-left: 8rpx;
					 }
				}
				.right{
					flex: 1;
					color: #333333;
          font-size: 26rpx;
				}
				.bgFFF6CE{
					background:#FFF6CE;
					padding: 8rpx ;
					border-radius: 5rpx;
					overflow:hidden;
					text-overflow:ellipsis;
					display:-webkit-box;
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2;
				}
			}
			.dateFlex{
				display: flex;
				justify-content: space-between;
			}
		}
	}
	.browse-content{
		display: flex;
		font-size: 28rpx;
		padding: 2% 3%;
		color: #999;
		.left{
			width: 60%;
			line-height: 86rpx;
				text{
					font-weight: bold;
					color: #EB5C02;
				}
				}
		.right{
				flex: 1;
				width: 40%;
				line-height: 40rpx;
				text-align: right;
				.btn{
					width: 171rpx;
					height: 56rpx;
					line-height: 56rpx;
					font-size: 30rpx;
					color: #333;
					background: #FFE03A;
					text-align: center;
					border-radius: 40rpx;
					display: inline-block;
				}
			}
		}
	}

</style>
